<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="listQuery" ref="filterForm">
        <el-row>
          <el-col :span="3">
            <el-form-item label="" class="postInfo-container-item" style="text-align: right" prop="search_type">
              <el-select v-model="listQuery.search_type" placeholder="请选择" clearable class="filter-item">
                <el-option key="user_name" label="姓名" value="1"/>
                <el-option key="mobile" label="手机号" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="postInfo-container-item" prop="search_keyword">
              <el-input v-model="listQuery.search_keyword" autocomplete="off" placeholder="请输入关键字"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="推荐人手机号" class="postInfo-container-item" prop="product_title">
              <el-input v-model="listQuery.p_mobile" autocomplete="off" placeholder="请输入关键字"
                        style="width: 50%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="80px" label="时间范围:" class="postInfo-container-item" prop="daterange">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                value-format="yyyy-MM-dd"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="daterangeHandle">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              查询
            </el-button>
            <el-button type="default" icon="el-icon-delete" @click="handleClear('filterForm')">
              清空查询条件
            </el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>

     <div>
       <el-tabs v-model="status" type="card" @tab-click="handleClick">
         <el-tab-pane label="全部订单" name="all"></el-tab-pane>
         <el-tab-pane label="未开始" name="0"></el-tab-pane>
         <el-tab-pane label="参与中" name="2"></el-tab-pane>
         <el-tab-pane label="已完成" name="3"></el-tab-pane>
         <el-tab-pane label="已关闭" name="4"></el-tab-pane>
       </el-tabs>
     </div>

    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" fit highlight-current-row
              style="width: 100%;margin-top:30px;">
      <el-table-column align="center" label="订单号">
        <template slot-scope="scope">
          {{ scope.row.order_no }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品信息">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height:50px"
            :src="scope.row.goods_pic_url"
            :preview-src-list="[scope.row.goods_pic_url]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          {{scope.row.goods_title}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品类型">
        <template slot-scope="scope">
         {{typeShow[scope.row.goods_type]}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价/数量">
        <template slot-scope="scope">
          {{ scope.row.limit_money}}/  {{ scope.row.order_num}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="实付款">
        <template slot-scope="scope">
          {{ scope.row.real_money}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="租赁收益">
        <template slot-scope="scope">
          {{ scope.row.payoff}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="收益方式">
        <template slot-scope="scope">
          {{ EarnTypeShow[scope.row.earn_type]}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="买家">
        <template slot-scope="scope">
          {{ scope.row.real_name}} <br>
          {{ scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          {{ statusShow[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDevice(scope)">设备信息</el-button>

          <el-button type="primary" size="mini" @click="handleView(scope)">
            查看详情
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
    <el-dialog :visible.sync="dialogVisible" title="设备信息">
      <el-form :model="device" label-position="left" label-width="200px">
        <el-form-item label="设备安装地址">
          <el-input v-model="device.address"></el-input>
        </el-form-item>
        <el-form-item label="设备安装图片" required>
          <Upload v-if="dialogVisible==true" v-model="device.device_pic" :pic_url="device.device_pic"/>
          <p>只支持.jpg .png格式 建议尺寸：750*450像素，最多上传10张(至少一张)</p>
        </el-form-item>
      </el-form>
          <div style="text-align:right;">
            <el-button type="danger" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="saveData">确认</el-button>
          </div>
    </el-dialog>

  </div>
</template>

<script>
  import Upload from '@/components/Upload/SingleImage3'
  import waves from '@/directive/waves' // waves directive

  import Pagination from '@/components/Pagination'

  import { getOrderDevice, getOrders, updateOrderDevice } from '../../api/orders'

  const statusShow = {
    0:'未生效', 1:'未开始', 2:'参与中' ,3:'已完成' ,4:'已关闭'
  }
  const EarnTypeShow = {
    1: '按月分红',
    2: '到期本息'
  }
  const typeShow = {
    1: '普通',
    2: '拼团'
  }
  const defaultCar = {}
  export default {
    components: { Pagination, Upload },
    directives: { waves },

    filters: {
      statusFilter(status) {
        const statusMap = {
          2: 'info',
          1: 'success'
        }
        return statusMap[status] ?? 'danger'
      },
      statusShowFilter(status) {
        return statusShow[status] ?? '无'
      }
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        typeShow,
        statusShow,
        EarnTypeShow,
        daterange: [],
        device: {},
        list: [],
        dialogVisible: false,
        dialogType: 'new',
        status:'all',
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit:20,
          user_id:this.$route.query.user_id?this.$route.query.user_id:''
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleClick(tab){
        this.listQuery.status=tab.name
        if (tab.name=='all')
        {
          delete  this.listQuery.status
        }
        this.getList()
      },
      daterangeHandle(value) {
        if (value) {
          this.listQuery.start_at = value[0]
          this.listQuery.end_at = value[1]
        } else {
          delete this.listQuery.start_at
          delete this.listQuery.end_at
        }

      },
      handleClear(formName) {
        this.$refs[formName].resetFields()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      async getList() {
        this.listLoading = true
        const res = await getOrders(this.listQuery)
        this.list = res.data.data
        this.total = res.data.total
        this.listLoading = false
      },
      handleDevice({$index,row}){
        getOrderDevice(row.id).then(res=>{
          this.device=res.data
          this.dialogVisible=true
        })
      },
      handleView({$index,row}){
        this.$router.push({name:'OrderDetail',query:{id:row.id}})
      },
      saveData(){
        const id=this.device.id
        delete this.device.id
        updateOrderDevice(id,this.device).then(res=>{
         if (res.code==200)
           this.$message.success('修改成功！')
          this.dialogVisible=false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }
</style>
